<template>
    <view>
        <view class="top-banner">
            <image src="../../../static/images/project/gelizhengce/top-banner.png" mode=""></image>
        </view>

        <view class="font-select common">
            <view class="select flex" :class="$store.getters.getSize(30)">
                <view class="small-btn" :class="selects == 1 ? 'selected' : 'hhh' " @click="changeFont(1)">
                    小字版
                </view>
                <view class="big-btn" :class=" selects == 2 ? 'selected' : 'hhh' " @click="changeFont(2)">
                    大字版
                    <text class="btn-text">new</text>
                </view>
            </view>
        </view>

        <view class="naviga common flex between">
            <view class="qidian flex col">
                <view class="city-type" :class="$store.getters.getSize(29)">
                    出发地
                </view>
                <view class="start-city flex" :class="$store.getters.getSize(48)">
                    <picker mode="multiSelector" @change="picker" @columnchange="bindMultiPickerColumnChange"
                        :value="multiIndex" :range="multiArray">
                        <text>{{fromQu=='全部'? fromCity:fromQu}}</text>
                    </picker>
                    <image src="../../../static/images/project/gelizhengce/show-more.png" mode=""></image>
                </view>
                <view class="go-out" :class="$store.getters.getSize(24)">
                    可出城
                </view>
            </view>

            <view class="change-btn">
                <image src="../../../static/images/project/gelizhengce/change-city.png" mode=""></image>
            </view>

            <view class="qidian flex col">
                <view class="city-type" :class="$store.getters.getSize(29)">
                    目的地
                </view>
                <view class="start-city flex" :class="$store.getters.getSize(48)">
                    <picker mode="multiSelector" @change="goPicker" @columnchange="goBindMultiPickerColumnChange"
                        :value="multiIndex2" :range="multiArray2">
                        <text :class="{gray: goCity == '可选区县'}">{{goQu=='全部'? goCity:goQu}}</text>
                    </picker>
                    <image src="../../../static/images/project/gelizhengce/show-more.png" mode=""></image>
                </view>
                <view class="go-out" :class="$store.getters.getSize(24)">
                    可进城
                </view>
            </view>
        </view>

        <view class="tips common flex" @click="openToast">
            <image src="../../../static/images/project/gelizhengce/tips.png" mode=""></image>
            <view class="notice-content flex">
                <view class="text-box flex" :style="{'width': noticeWidth + 'rpx'}">
                    <view class="text-wrap" id="notice" v-text="announce"
                        :style="{'animation': `mymove ${time}s linear infinite`}" :class="$store.getters.getSize(28)">
                    </view>
                </view>
            </view>
        </view>

        <view class="open-toas flex" v-show="showToast">
            <view class="toast">
                <view class="toast-text">
                    <text>{{announce}}</text>
                    <view class="to-article" @click="goAcrticle">
                        查看详情
                    </view>
                </view>
                <view class="close-toast" @click="closeToast">
                    确定
                </view>
            </view>
        </view>

        <view class="in-out common">
            <view class="out-city out">
                <view class="out-top overflow flex">
                    <image class="in-block" src="../../../static/images/project/gelizhengce/out.png" mode=""></image>
                    <view class="area in-block" :class="$store.getters.getSize(34)">
                        出{{details.leavecity[0].leavecity || this.city}}<text class="daoqu" v-if="goCity !== '可选区县'">{{fromQu=='全部'? "":fromQu}}</text>
                    </view>
                    <!-- <view class="in-block flex" :class="`${details.leave_level_city_dengji}-level`">
                        <text :class="$store.getters.getSize(22)">
                        {{details.leave_level_city}}>
                        </text>
                    </view> -->
                   <view class="middle-level in-block" :class="$store.getters.getSize(22)"
                        v-if="details.leave_level_city_dengji === 'middle'">
                        {{details.leave_level_city}}>
                    </view>
                    <view class="height-level in-block" :class="$store.getters.getSize(22)"
                        v-if="details.leave_level_city_dengji === 'height'">
                        {{details.leave_level_city}}>
                    </view>
                    <view class="low-level in-block" :class="$store.getters.getSize(22)" v-if="details.leave_level_city_dengji === 'low'">
                        {{details.leave_level_city}}>
                    </view>
                </view>

                <view class="out-body" :class="$store.getters.getSize(28)">
                    <view class="out-text" :class="{ isShow: leaveIndex == 0 }" @click="showText(0)">
                        {{details.chu_leave.daoyu || "数据更新中"}}
                    </view>
                    <view class="out-btn" @click="goOutAcrticle(details.leavecity[0].arr)">
                        查看原文&nbsp;>
                    </view>
                </view>
            </view>

            <view class="out-city out">
                <view class="out-top overflow flex">
                    <image class="in-block" src="../../../static/images/project/gelizhengce/in.png" mode=""></image>
                    <view class="area in-block" :class="$store.getters.getSize(34)">
                        到{{goCity == "可选区县"? details.leavecity[0].leavecity : goCity }}&nbsp;
                    </view>

                    <view class="height-level in-block" :class="$store.getters.getSize(22)"
                        v-show="details.arrive_level_city == '部分地区高、中风险'">
                        {{goCity == "可选区县"?  details.leave_level_city : details.arrive_level_city}}>
                    </view>
                    <view class="middle-level in-block" :class="$store.getters.getSize(22)"
                        v-show="details.arrive_level_city == '部分地区中风险'">
                        {{goCity == "可选区县"?  details.leave_level_city : details.arrive_level_city}}>
                    </view>
                    <view class="low-level in-block" :class="$store.getters.getSize(22)"
                        v-show="details.arrive_level_city == '低风险'">
                        低风险>
                    </view>
                    <view class="jiezhong in-block overflow" :class="$store.getters.getSize(22)">
                        新冠疫苗接种
                    </view>
                </view>

                <view class="out-body geli">
                    <view class="text-title" :class="$store.getters.getSize(30)">
                        隔离/核酸规定:
                    </view>
                    <view class="out-text" :class="{ isShow: leaveIndex == 3 }" @click="showText(3)">
                        <text class="low" :class="$store.getters.getSize(24)">低风险地区政策</text>
                        <text>
                            {{goCity == "可选区县"? details.leavecity[0].gov : details.arrivecity[0].gov}}
                        </text>
                    </view>
                    <view class="border-line"></view>
                    <view class="out-text-mid" v-show="details.leave_level_city_dengji == 'middle' || details.leave_level_city_dengji == 'height'">
                        <text :class="$store.getters.getSize(24)">中风险地区政策</text>
                    </view>
                    <view class="border-line" v-show="details.leave_level_city_dengji == 'middle' || details.leave_level_city_dengji == 'height'"></view>
                    <view class="out-text-hgt" v-show="details.leave_level_city_dengji == 'height'">
                        <text :class="$store.getters.getSize(24)">高风险地区政策</text>
                    </view>
                    <view class="border-line" v-show="details.leave_level_city_dengji == 'height'"></view>
                    <view class="out-btn" :class="$store.getters.getSize(28)"
                        @click="goOutAcrticle(details.arrivecity[0].arr)">
                        查看原文&nbsp;>
                    </view>
                </view>
                <view class="out-body check-in" v-if=" goCity == '可选区县'? details.leavecity[0].dengji : details.arrivecity[0].dengji">
                    <text class="text-title" :class="$store.getters.getSize(30)">
                        登记/报备规定:
                    </text>
                    <!-- <text class="out-text" :class="$store.getters.getSize(28)"> -->
                    {{goCity == "可选区县"? details.leavecity[0].dengji : details.arrivecity[0].dengji}}
                    <!-- </text> -->
                    <view class="out-btn" :class="$store.getters.getSize(28)"
                        @click="goOutAcrticle(details.arrivecity[0].dj_arr)">
                        查看原文&nbsp;>
                    </view>
                </view>
            </view>

            <view class="out-area out" v-show=" goQu !== '全部'">
                <view class="out-top flex">
                    <image src="../../../static/images/project/gelizhengce/in.png" mode=""></image>
                    <view class="area" :class="$store.getters.getSize(36)">
                        到{{goQu}}&nbsp;
                    </view>
                    <view class="height-level" :class="$store.getters.getSize(22)"
                        v-show="details.arrive_level_city == '部分地区高、中风险'">
                        {{goCity == "可选区县"?  details.leave_level_city : details.arrive_level_city}}>
                    </view>
                    <view class="middle-level" :class="$store.getters.getSize(22)"
                        v-show="details.arrive_level_city == '部分地区中风险'">
                        {{goCity == "可选区县"?  details.leave_level_city : details.arrive_level_city}}>
                    </view>
                    <view class="low-level" :class="$store.getters.getSize(22)"
                        v-show="details.arrive_level_city == '低风险'">
                        低风险>
                    </view>
                </view>
                <view class="out-body geli">
                    <view class="text-title" :class="$store.getters.getSize(30)">
                        隔离/核酸规定:
                    </view>
                    <view class="out-text "  :class="{ isShow: leaveIndex == 5 }" @click="showText(5)">
                        <text class="low" :class="$store.getters.getSize(24)">低风险地区政策</text>
                        {{details.arrivecity[0].gov}}
                    </view>
                    <view class="out-text-mid" v-show="details.leave_level_city_dengji == 'middle' || details.leave_level_city_dengji == 'height'">
                        <text :class="$store.getters.getSize(24)">中风险地区政策</text>
                    </view>
                    <view class="border-line" v-show="details.leave_level_city_dengji == 'middle' || details.leave_level_city_dengji == 'height'"></view>
                    <view class="out-text-hgt" v-show="details.leave_level_city_dengji == 'height'">
                        <text :class="$store.getters.getSize(24)">高风险地区政策</text>
                    </view>
                    <view class="border-line" v-show="details.leave_level_city_dengji == 'height'"></view>
                    <view class="out-btn" :class="$store.getters.getSize(28)" @click="goOutAcrticle(details.arrivequ[0].arr)">
                        查看原文&nbsp;>
                    </view>
                </view>
                <view class="out-body check-in" v-if="details.arrivecity[0].dengji">
                    <text class="text-title" :class="$store.getters.getSize(30)">
                        登记/报备规定:
                    </text>
                    <text class="out-text" :class="$store.getters.getSize(28)">
                        {{details.arrivecity[0].dengji}}
                    </text>
                    <view class="out-btn" :class="$store.getters.getSize(28)" @click="goOutAcrticle(details.arrivequ[0].dj_arr)">
                        查看原文&nbsp;>
                    </view>
                </view>
            </view>
        </view>

      
    </view>
</template>

<script>
    import util from '../../../util/util.js'
    export default {
        data() {
            return {
                selects: 1,
                announce: "非必要不出省！过去14天从外地返穗，所有人员尽快主动做一次核酸检测。在没有完成核酸检测前，建议不要参加聚集性活动，避免乘坐公共交通工具。",
                announceInfo: {},
                hideData: '',
                number: 1,
                time: 0,
                noticeWidth: 0,
                showToast: false,
                multiArray: [],
                multiIndex: [0, 0, 0],
                multiArray2: [],
                multiIndex2: [0, 0, 0],
                query1: [],
                query2: [],
                provinceArr: [],
                cityArr: [],
                quArr: [],
                fromCity: '深圳',
                fromCityCode: 'sz',
                fromQu: "全部",
                goCity: '可选区县',
                goCityCode: '',
                goQu: "全部",
                details: {},
                leaveIndex: -1,
                outDaoyu: "2",
                city:"",
                citycode:"sz"
            }
        },
        onLoad(opt) {
            // this.city = opt.city || uni.getStorageSync("city") || "深圳";
            this.fromCity = opt.city || uni.getStorageSync("city") || "深圳";
            this.fromQu = opt.fromQu || '全部';
            this.fromCityCode = opt.citycode || uni.getStorageSync("citycode") || 'sz';
            this.goCity = opt.arrivecity || "可选区县";
            this.goQu = opt.arriveQu || "全部";
            this.goCityCode = opt.goCityCode || '';
            this.citycode = opt.citycode || uni.getStorageSync("citycode") || 'sz';
            console.log(this.citycode)
            
            console.log(this.goCityCode)
            util.getUrl();
            this.getProvinceData(this.fromCityCode, this.fromQu, this.goCityCode, this.goQu);
            uni.setStorageSync("city", this.fromCity);
            console.log(this.outDaoyu)

            util.submitPath();
        },
        mounted() {
            let info = uni.createSelectorQuery().select('.text-wrap');
            info.boundingClientRect(res => {
                this.noticeWidth = parseInt(res.width * 1.82); // 获取元素宽度
                this.time = parseInt(this.noticeWidth / 150);
            }).exec();
        },
        methods: {
            /**
             * 滑动城市触发的事件
             * @method bindMultiPickerColumnChange
             * @param {string} val 类型
             * @param {Object} e 事件对象
             **/
            bindMultiPickerColumnChange(e) {
                this.multiIndex[e.detail.column] = e.detail.value;
                switch (e.detail.column) {
                    case 0:
                        let cityArr = this.query1.filter((item) => {
                            return item.province == this.multiArray[0][e.detail.value]
                        })[0].citylist.map((item) => {
                            return item.cityname
                        }).filter((item) => {
                            return item != "选择城市"
                        })
                        this.multiArray[1] = cityArr
                        this.multiIndex[1] = 0;
                        let quArr = Object.values(this.query2[cityArr[0]].qu)
                        quArr.unshift("全部")
                        this.multiArray[2] = quArr

                        this.multiIndex[2] = 0;
                        break;
                    case 1:
                        quArr = Object.values(this.query2[this.multiArray[1][e.detail.value]].qu)
                        quArr.unshift("全部")
                        this.multiArray[2] = quArr
                        this.multiIndex[2] = 0;
                        break;
                }
                this.$forceUpdate();
            },

            /**
             * 滑动城市触发的事件
             * @method gobindMultiPickerColumnChange
             * @param {string} val 类型
             * @param {Object} e 事件对象
             **/
            goBindMultiPickerColumnChange(e) {
                this.multiIndex2[e.detail.column] = e.detail.value;
                switch (e.detail.column) {
                    case 0:
                        let cityArr = this.query1.filter((item) => {
                            return item.province == this.multiArray2[0][e.detail.value]
                        })[0].citylist.map((item) => {
                            return item.cityname
                        }).filter((item) => {
                            return item != "选择城市"
                        })
                        this.multiArray2[1] = cityArr
                        this.multiIndex2[1] = 0;
                        let quArr = Object.values(this.query2[cityArr[0]].qu)
                        quArr.unshift("全部")
                        this.multiArray2[2] = quArr

                        this.multiIndex2[2] = 0;
                        break;
                    case 1:
                        quArr = Object.values(this.query2[this.multiArray2[1][e.detail.value]].qu)
                        quArr.unshift("全部")
                        this.multiArray2[2] = quArr
                        this.multiIndex2[2] = 0;
                        break;
                }
                this.$forceUpdate();
            },

            /**
             * 获取省市区
             * @method getProvinceData
             */
            getProvinceData(code, fromQu, arrivecode, goQu) {
                let data = {
                    action: "geli_all_qu",
                    type: "city",
                    citycode: code,
                    arrive: arrivecode || code || '',
                    leavequ: fromQu || '',
                    arrivequ: goQu || ''
                };
                util.request('zhuanti.php', data, "POST").then(res => {
                    this.details = res.data.data;
                    // console.log(this.details.leavecity[0].gov)
                    // let str = detalis.leavecity[0].gov.match(/中高风险地区(\S*)n3/)[1]; 
                    // this.outDaoyu = str
                    this.query1 = res.data.data.cityname.city;
                    this.query2 = res.data.data.qu;
                    this.query2["澳门"] = {
                        qu: ""
                    };
                    let provinceArr = this.query1.map((item) => {
                        return item.province;
                    })
                    this.multiArray.push(provinceArr);
                    this.multiArray2.push(provinceArr);
                    let cityArr = this.query1[0].citylist.map((item) => {
                        return item.cityname;
                    })
                    this.multiArray.push(cityArr);
                    this.multiArray2.push(cityArr);
                    let quArr = Object.values(this.query2[cityArr[0]].qu)
                    quArr.unshift("全部")
                    this.multiArray.push(quArr);
                    this.multiArray2.push(quArr);
                    this.$forceUpdate();
                })
            },

            /**
             * 获取城市编码
             * @method getCityCode
             * @param {string} city 城市名
             */
            async getCityCode(city) {
                const res = await util.request("citycode.php", {
                    action: "city",
                    city: city
                }, "POST")
                return res.data.data[0].citycode;
            },

            /**
             * pick点击确认
             * @method picker
             * @param {Object} localInfo 地区信息
             */
            async picker(e) {
                this.fromCity = this.multiArray[1][this.multiIndex[1]];
                this.fromQu = this.multiArray[2][this.multiIndex[2]];
                this.fromCityCode = await this.getCityCode(this.multiArray[1][this.multiIndex[1]]);
                if (this.goCity !== "可选区县") {
                    if (this.multiArray[1][this.multiIndex[1]] == this.goCity) {
                        uni.showToast({
                            title: '请不要选择相同的城市',
                            icon: 'none'
                        })
                        return
                    }
                    this.multiIndex = e.detail.value;
                    // this.fromCity = this.multiArray[1][this.multiIndex[1]];

                    // this.getDetailInfoData()
                    uni.navigateTo({
                        url: `./gelizhengce?arrivecity=${this.goCity}&goCityCode=${this.goCityCode}&arriveQu=${this.goQu}&city=${this.fromCity}&citycode=${this.fromCityCode}&fromQu=${this.fromQu}`,
                        animationType: 'fade-in'
                    })
                }

            },

            /**
             * pick点击确认
             * @method goPicker
             * @param {Object} localInfo 地区信息
             */
            async goPicker(e) {
                if (this.multiArray2[1][this.multiIndex2[1]] == this.fromCity) {
                    uni.showToast({
                        title: '请不要选择相同的城市',
                        icon: 'none'
                    })
                    return
                }
                this.multiIndex2 = e.detail.value;
                this.goCity = this.multiArray2[1][this.multiIndex2[1]];
                this.goCityCode = await this.getCityCode(this.multiArray2[1][this.multiIndex2[1]]);
                this.goQu = this.multiArray2[2][this.multiIndex2[2]];
                // this.getDetailInfoData()
                uni.navigateTo({
                    url: `./gelizhengce?arrivecity=${this.goCity}&goCityCode=${this.goCityCode}&arriveQu=${this.goQu}&city=${this.fromCity}&citycode=${this.fromCityCode}&fromQu=${this.fromQu}`,
                    animationType: 'fade-in'
                })
            },

            /**
             * 改变字体
             * @method changeFont
             * @param {number} val 传入的数字
             */
            changeFont(val) {
                this.selects = val;
                if (this.selects == 2) {
                    this.$store.commit('sizetype', "m");
                } else if (this.selects == 1) {
                    this.$store.commit('sizetype', "s");
                }
            },

            /**
             * 获取通知数据
             * @method getAnnounce
             */
            getAnnounce() {
                util.request('zhuanti.php', {
                    action: "geli_notice",
                    citycode: "sz"
                }, "POST").then(res => {
                    console.log(res.data.data);
                    this.announce = res.data.data.daoyu;
                    this.announceInfo = res.data.data.arr;
                })
            },

            /**
             * 打开弹窗
             * @method openToast
             */
            openToast() {
                this.showToast = true;
            },

            /**
             * 关闭弹窗
             * @method closeToast
             */
            closeToast() {
                this.showToast = false;
            },

            /** 
             * 跳转文章页
             * @method goAcrticle 
             */
            goAcrticle() {
                uni.navigateTo({
                    url: `/pages/article/detail/detail?id=${this.announceInfo.id}&type=${this.announceInfo.type}&city=${this.announceInfo.citycode}`
                });
            },

            goOutAcrticle(val) {
                uni.navigateTo({
                    url: `/pages/article/detail/detail?id=${val.id}&type=${val.type}&city=${val.citycode}`
                });
            },


            showText(index) {
                if (this.leaveIndex != index) {
                    this.leaveIndex = index;
                } else {
                    this.leaveIndex = -1;
                }
            },
        }
    }
</script>

<style>
    @import url("../../../tools.css");
    @import url("./gelizhengce.css");

    .notice-content {
        width: 683rpx;
        height: 54rpx;
        padding: 0 8rpx;
        overflow: hidden;
    }

    .text-wrap {
        padding-left: 600rpx;
        font-size: 28rpx;
        color: #000000;
        white-space: nowrap;
    }

    .text-box {
        height: 54rpx;
        padding: 0 8rpx;
        overflow: hidden;
    }

    .text-wrap {
        position: relative;
    }

    @keyframes mymove {
        from {
            left: 0px;
        }

        to {
            left: -2430rpx;
        }
    }
</style>
